<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			在线编辑器
		</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/codemirror.min.js">
		</script>
		<link rel="shortcut icon" href="https://cdnjs.cloudflare.com/images/favicon.ico"
		mce_href="https://cdnjs.cloudflare.com/images/favicon.ico" type="image/x-icon">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/codemirror.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/mode/htmlmhttps:tmlmixed.min.js">
		</script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/mode/css/css.min.js">
		</script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/mode/javascript/javascript.min.js">
		</script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/mode/xml/xml.min.js">
		</script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/addon/edit/closetag.min.js">
		</script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/addon/edit/closebrackets.min.js">
		</script>
		<!--[if lt IE 9]>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
			</script>
		<![endif]-->
	</head>
	<body>
		<style>
			body{min-height:300px;padding-top:90px;background: #f6f6f6;}.container{width:98%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.CodeMirror{min-height:300px;;font-family:
			Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;}#textareaCode{min-height:300px}#iframeResult{display:
			block;overflow: hidden;border:0!important;min-width:100px;width:100%;min-height:300px;background-color:#fff}@media
			screen and (max-width:768px){#textareaCode{height:300px}.CodeMirror{height:300px;font-family:
			Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;}#iframeResult{height:300px}.form-inline{padding:6px
			0 2px 0}}.logo h1{background-image:url(/images/logo-domain-white.png);background-repeat:no-repeat;text-indent:-9999px;width:160px;height:39px;margin-top:10px;display:block}
		</style>
		<nav class="navbar navbar-default navbar-fixed-top" style="background: #96b97d;">
			<div class="container">
				<div class="navbar-header logo">
					<h1 onClick="window.open('www.guyezi.com')"></h1>
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<div class="col-sm-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<form class="form-inline">
								<div class="row">
									<div class="col-xs-6">
										<button type="button" onclick="resetCode()" class="btn btn-default">
											源代码：
										</button>
									</div>
									<div class="col-xs-6 text-right">
										<button type="button" class="btn btn-success" onclick="submitTryit()"
										id="submitBTN">
											<span class="glyphicon glyphicon-send">
											</span>
											点击运行
										</button>
									</div>
								</div>
							</form>
						</div>
						<div class="panel-body">
							<textarea class="form-control" id="textareaCode" name="textareaCode">
							</textarea>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<form class="form-inline">
								<button type="button" class="btn btn-default">
									运行结果
								</button>
							</form>
						</div>
						<div class="panel-body">
							<div id="iframewrapper">
							</div>
						</div>
					</div>
				</div>
			</div>
			<footer>
				<div class="row">
					<div class="col-sm-12">
						<div style="text-align: center;">
							<!-- demo测试页广告： <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
							<ins class="adsbygoogle"
							style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
							data-ad-client="ca-pub-5751451760833794"
							data-ad-slot="6979016065"></ins>
							<script>
							(adsbygoogle = window.adsbygoogle || []).push({});
							</script>
							-->
							<hr>
							<p>
								Copyright © 2013-2021
								<a target="_blank" href="//www.guyezi.com/">
									孤爺仔
								</a>
							</p>
						</div>
					</div>
				</div>
			</footer>
		</div>
		<script>
			var mixedMode = {
				name: "htmlmixed",
				scriptTypes: [{
					matches: /\/x-handlebars-template|\/x-mustache/i,
					mode: null
				},
				{
					matches: /(text|application)\/(x-)?vb(a|script)/i,
					mode: "vbscript"
				}]
			};
			var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
				mode: mixedMode,
				selectionPointer: true,
				lineNumbers: false,
				matchBrackets: true,
				indentUnit: 4,
				indentWithTabs: true
			});

			window.addEventListener("resize", autodivheight);

			var x = 0;
			function autodivheight() {
				var winHeight = 0;
				if (window.innerHeight) {
					winHeight = window.innerHeight;
				} else if ((document.body) && (document.body.clientHeight)) {
					winHeight = document.body.clientHeight;
				}
				//通过深入Document内部对body进行检测，获取浏览器窗口高度
				if (document.documentElement && document.documentElement.clientHeight) {
					winHeight = document.documentElement.clientHeight;
				}
				height = winHeight * 0.68 editor.setSize('100%', height);
				document.getElementById("iframeResult").style.height = height + "px";
			}
			function resetCode() {
				var initCode = "<!DOCTYPE html>\n<html>"editor.getDoc().setValue(initCode);
				submitTryit();
			}
			function submitTryit() {
				var text = editor.getValue();
				var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im
				var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
				var array_matches_head = patternHead.exec(text);
				var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;

				var array_matches_body = patternBody.exec(text);
				var basepath_flag = 1;
				var basepath = '';
				if (basepath_flag) {
					basepath = '<base href="http://www.guyezi.com/" target="_blank">';
				}
				if (array_matches_head) {
					text = text.replace('<head>', '<head>' + basepath);
				} else if (patternHtml) {
					text = text.replace('<html>', '<head>' + basepath + '</head>');
				} else if (array_matches_body) {
					text = text.replace('<body>', '<body>' + basepath);
				} else {
					text = basepath + text;
				}
				var ifr = document.createElement("iframe");
				ifr.setAttribute("frameborder", "0");
				ifr.setAttribute("id", "iframeResult");
				document.getElementById("iframewrapper").innerHTML = "";
				document.getElementById("iframewrapper").appendChild(ifr);

				var ifrw = (ifr.contentWindow) ? ifr.contentWindow: (ifr.contentDocument.document) ? ifr.contentDocument.document: ifr.contentDocument;
				ifrw.document.open();
				ifrw.document.write(text);
				ifrw.document.close();
				autodivheight();
			}
			submitTryit();
			autodivheight();
		</script>
		<div style="display:none;">
			<!-- 统计代码： <script>
			var _hmt = _hmt || [];
			(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxx";
			var s = document.getElementsByTagName("script")[0]; 
			s.parentNode.insertBefore(hm, s);
			})();
			</script> 
			-->
			<!-- Google标签： <script async src="https://www.googletagmanager.com/gtag/js?id=xxxxxxxxx"></script>
			<script>
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'UA-84264393-2');
			</script>
			-->
		</div>
	</body>

</html>